<!doctype html>
<html lang="en">
<head>
    <title>GET VIDEO</title>
    <meta charset="utf-8">
</head>
<body>
<input type="button" title="开启摄像头" value="开启摄像头" οnclick="getMedia()" />
<video id="video" width="500px" height="500px" autoplay="autoplay"></video>
<canvas id="canvas" width="500px" height="500px"></canvas>
<button id="snap" οnclick="takePhoto()">拍照</button>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>>
<script>
    //获得video摄像头区域
    var video = document.getElementById("video");
    function getMedia() {
        var constraints = {
            video: {width: 500, height: 500},
            audio: true
        };

        var promise = navigator.mediaDevices.getUserMedia(constraints);
        promise.then(function (MediaStream) {
            video.srcObject = MediaStream;
            video.play();
        }).catch(function (PermissionDeniedError) {
            console.log(PermissionDeniedError);
        })
    }
    function takePhoto() {
        //获得Canvas对象
        var canvas = document.getElementById("canvas");
        var ctx = canvas.getContext('2d');
        ctx.drawImage(video, 0, 0, 500, 500);
        var url = canvas.toDataURL('image/jpeg',1);

        saveimage(url);

    }

    function saveimage(url){
        $.ajax({
            url: "http://localhost:8080/Test/test",
            type: "POST",
            data:{
                imgStr:url
            },

            success: function (data) {
                console.log("success")
                alert(data)
            }
        });

    }

</script>
</body>
</html>
